﻿<div class="WAll  PT">



	<div class="ContentBlockTitle">独立使用(默认)</div>
	<ul class="TimeLine">
		<li class="TimeLineItem active">
			<div class="Info">您的包裹已签收，签收人：小白兔</div>
			<div class="Time">2015-11-28 18:32:34</div>
		</li>
		<li class="TimeLineItem">
			<div class="Info">您的包裹已签收，签收人：小白兔您的包裹已签收，签收人：小白兔</div>
			<div class="Time">2015-11-28 18:32:34</div>
		</li>
		<li class="TimeLineItem">
			<div class="Info">您的包裹已签收，签收人：小白兔</div>
			<div class="Time">2015-11-28 18:32:34</div>
		</li>

	</ul>
	<div class="ContentBlockTitle">集成公共 list(列表)</div>
	<div class="TimeLine">	
		<ul class="ListBlock">
			<li class="ListItem active">
				<div class="ItemCon InkRipple">
					<div class="ItemMedia">
						<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
					</div>
					<div class="ItemInner">
						<div class="ItemTitle">
						Ivan Petrov
						</div>
						<div class="ItemAfter">
						CEO
						</div>
					</div>
				</div>
			</li>
			<li class="ListItem">
				<div class="ItemCon InkRipple">
					<div class="ItemMedia">
						<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
					</div>
					<div class="ItemInner">
						<div class="ItemTitle">
						John Doe
						</div>
						<div class="ItemAfter">
						<span class="Badge BadgePrimary">13</span>
						</div>
					</div>
				</div>
			</li>
			<li class="ListItem">
				<div class="ItemCon InkRipple">
					<div class="ItemMedia">
						<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
					</div>
					<div class="ItemInner">
						<div class="ItemTitle">
						Jenna Smith
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<div class="TimeLine ">	
		<ul class="ListBlock MediaList">
			<li class="ListItem active">
				<a href="javascript:;" class="ItemLink ItemCon InkRipple">
					<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">黄色潜艇</div>
							<div class="ItemAfter">$15</div>
						</div>
						<div class="ItemSubtitle">披头士乐队</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</a>
			</li>
			<li class="ListItem">
				<a href="javascript:;" class="ItemLink ItemCon InkRipple">
					<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">黄色潜艇</div>
							<div class="ItemAfter">$15</div>
						</div>
						<div class="ItemSubtitle">披头士乐队</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</a>
			</li>
			<li class="ListItem">
				<a href="javascript:;" class="ItemLink ItemCon InkRipple">
					<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">黄色潜艇</div>
							<div class="ItemAfter">$15</div>
						</div>
						<div class="ItemSubtitle">披头士乐队</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</a>
			</li>
			<li class="ListItem">
				<a href="javascript:;" class="ItemLink ItemCon InkRipple">
					<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">黄色潜艇</div>
							<div class="ItemAfter">$15</div>
						</div>
						<div class="ItemSubtitle">披头士乐队</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</a>
			</li>
			<li class="ListItem">
				<a href="javascript:;" class="ItemLink ItemCon InkRipple">
					<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">不要阻止我</div>
							<div class="ItemAfter">$22</div>
						</div>
						<div class="ItemSubtitle">女王</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</a>
			</li>
		</ul>
	</div>


</div>




















